<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<style>
			im g:nth-child(1){
				/*vertical-align:baseline 默认基线对齐 */
				vertical-align: baseline;
			}
			/*问题：派生选择器，特点：找后代  p   img*/
			im g:nth-child(2){
				/*vertical-align:baseline 顶部对齐 */
				vertical-align: top;
				width: 500px;
				height: 500px;
				background: red;
			}
			img .baseline{
				vertical-align: baseline;
			}
			img.top{
				vertical-align: top;
			}
			img.middle{
				vertical-align: middle;
			}
			img.bottom{
				vertical-align: bottom;
			}
		</style>
	</head>
	<body>
		<!-- 需求结构：4个p，嵌套 图片叫什么名字 
		                    文字后加img，设定宽高：25~100px；
							每个图片后面加：基线对齐，顶部对齐
							居中对齐，底部对齐
		-->
		<h1>文本与图片垂直属性</h1>
		<p>Jett01<img class="baseline" src="img/jett01.jpg" alt="Jett01" width="100px" height="100px">基线对齐</p>
		<p>Jett02<img class="top" src="img/jett02.jpg" alt="Jett02" width="100px" height="100px">顶部对齐</p>
		<p>火男与Jett<img class="middle" src="img/火男与jett.jpg" alt="火男与Jett" width="100px" height="100px">居中对齐</p>
		<p>香香奶妈<img class="bottom" src="img/香香奶妈.png" alt="香香奶妈" width="100px" height="100px">底部对齐</p>
		<!-- css选择器--抓第一张图片......
		思路：派生选择器：找后代+伪类选择器：添加效果[错误]
		错误原因：html结构不符合派生特点：p包含4个img
		        伪类选择器，4个img需要4个p
		p img:nth-child(1)
		-->
	</body>
</html>